<template>
  <view class="login-page">
    <!-- 背景装饰 -->
    <view class="bg-wrapper">
      <view class="bg-circle circle-1"></view>
      <view class="bg-circle circle-2"></view>
      <view class="bg-circle circle-3"></view>
    </view>

    <!-- 顶部导航 -->
    <u-navbar :placeholder="true" :border="false" :bg-color="'transparent'" title="" left-icon="arrow-left"
      :left-icon-size="20" left-icon-color="#fff" @left-click="handleBack"></u-navbar>

    <!-- 主要内容 -->
    <view class="login-container">
      <!-- Logo和标题区域 -->
      <view class="header-section">
        <text class="app-title">欢迎登录</text>
        <text class="app-subtitle">验证手机号快速登录</text>
      </view>

      <!-- 登录表单 -->
      <view class="form-section">
        <!-- 手机号输入框 -->
        <view class="form-item">
          <text class="form-label">手机号</text>
          <u-input v-model="tel" type="number" placeholder="请输入手机号" :border="false" :custom-style="inputStyle"
            prefix-icon="phone" prefix-icon-style="color: #909399" clearable></u-input>
        </view>

        <!-- 验证码输入框 -->
        <view class="form-item">
          <text class="form-label">验证码</text>
          <view class="code-input-wrapper">
            <u-input v-model="code" type="number" placeholder="请输入验证码" :border="false" :custom-style="codeInputStyle"
              prefix-icon="lock" prefix-icon-style="color: #909399" clearable></u-input>
            <view class="code-button-wrapper">
              <u-code ref="uCodeRef" @change="codeChange" />
              <u-button :text="tips" type="success" size="small" shape="round" :custom-style="codeButtonStyle"
                @click="getCode" />
            </view>
          </view>
        </view>

        <!-- 登录按钮 -->
        <view class="login-button-wrapper">
          <u-button type="primary" shape="round" @click="submit">
            登录
          </u-button>
        </view>

        <!-- 切换登录方式 -->
        <view class="alternative-section">
          <text class="password-login" @click="handlePasswordLogin">密码登录</text>
        </view>

        <!-- 第三方登录 -->
        <view class="third-party-section">
          <view class="divider-wrapper">
            <view class="divider-line"></view>
            <text class="divider-text">其他登录方式</text>
            <view class="divider-line"></view>
          </view>

          <view class="social-buttons">
            <view class="social-button wechat" @click="handleWechatLogin">
              <u-icon name="weixin-fill" size="24" color="#07c160"></u-icon>
            </view>
            <view class="social-button qq" @click="handleQQLogin">
              <u-icon name="qq-fill" size="24" color="#12b7f5"></u-icon>
            </view>
          </view>
        </view>

        <!-- 用户协议 -->
        <view class="agreement-section">
          <text class="agreement-text">登录代表同意</text>
          <text class="agreement-link">用户协议、隐私政策，</text>
          <text class="agreement-text">并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { CSSProperties } from 'vue'
import uCode from 'uview-plus/components/u-code/u-code.vue'
import { HOME_PATH, isTabBarPath, LOGIN_PATH, removeQueryString } from '@/router'
import { setToken } from '@/utils/auth'
// import { useUserStore } from '@/store';

// const userStore = useUserStore();
// 响应式数据
const tel = ref<string>('18502811111')
const code = ref<string>('1234')
const tips = ref<string>()
const uCodeRef = ref<InstanceType<typeof uCode> | null>(null)
let redirect = HOME_PATH

// 样式配置
const inputStyle = {
  backgroundColor: 'rgba(255, 255, 255, 0.9)',
  borderRadius: '12px',
  padding: '16px',
  fontSize: '16px',
  boxShadow: '0 2px 12px rgba(102, 126, 234, 0.1)',
  backdropFilter: 'blur(10px)',
  flex: '1'
}

const codeInputStyle = {
  backgroundColor: 'rgba(255, 255, 255, 0.9)',
  borderRadius: '12px',
  padding: '16px',
  fontSize: '16px',
  boxShadow: '0 2px 12px rgba(102, 126, 234, 0.1)',
  backdropFilter: 'blur(10px)',
  flex: '1'
}

const codeButtonStyle = {
  backgroundColor: '#12B7F5',
  border: 'none',
  fontSize: '14px',
  minWidth: '80px',
  height: '36px'
}


// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 验证码倒计时变化
function codeChange(text: string) {
  tips.value = text
}

// 获取验证码
function getCode() {
  if (!uni.$u.test.mobile(Number(tel.value))) {
    uni.$u.toast('请输入正确的手机号')
    return
  }

  if (uCodeRef.value?.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码',
    })
    setTimeout(() => {
      uni.hideLoading()
      uni.$u.toast('验证码已发送')
      // 通知验证码组件内部开始倒计时
      uCodeRef.value?.start()
    }, 1000)
  } else {
    uni.$u.toast('倒计时结束后再发送')
  }
}

// 提交登录
async function submit() {
  if (!uni.$u.test.mobile(Number(tel.value))) {
    uni.$u.toast('请输入正确的手机号')
    return
  }
  if (!code.value) {
    uni.$u.toast('请输入验证码')
    return
  }

  // 显示加载状态
  uni.showLoading({
    title: '登录中...',
  })

  // 登录请求
  // const res = await userStore.login({ phone: tel.value, code: code.value }).catch(() => {
  //   uni.$u.toast('登录失败');
  // });
  // if (!res) return;

  // 模拟登录成功
  setTimeout(() => {
    uni.hideLoading()
    setToken('1234567890')
    uni.$u.toast('登录成功')

    setTimeout(() => {
      uni.$u.route({
        type: isTabBarPath(redirect) ? 'switchTab' : 'redirectTo',
        url: redirect,
      })
    }, 800)
  }, 1500)
}

// 密码登录
const handlePasswordLogin = () => {
  uni.showToast({
    title: '密码登录开发中',
    icon: 'none'
  })
}


// 微信登录
const handleWechatLogin = () => {
  uni.showToast({
    title: '微信登录开发中',
    icon: 'none'
  })
}

// QQ登录
const handleQQLogin = () => {
  uni.showToast({
    title: 'QQ登录开发中',
    icon: 'none'
  })
}

// 页面加载
onLoad((options: any) => {
  if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
    redirect = decodeURIComponent(options.redirect)
  }
})
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;

  .bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;

    .bg-circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: float 6s ease-in-out infinite;

      &.circle-1 {
        width: 200px;
        height: 200px;
        top: -100px;
        right: -50px;
        animation-delay: 0s;
      }

      &.circle-2 {
        width: 150px;
        height: 150px;
        top: 60%;
        left: -75px;
        animation-delay: 2s;
      }

      &.circle-3 {
        width: 100px;
        height: 100px;
        bottom: 20%;
        right: 1px;
        animation-delay: 4s;
      }
    }
  }

  .login-container {
    padding: 20px;

    .header-section {
      text-align: center;
      margin-bottom: 40px;

      .app-title {
        display: block;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 8px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      }

      .app-subtitle {
        display: block;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .form-section {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      border-radius: 20px;
      padding: 30px 20px;
      border: 1px solid rgba(255, 255, 255, 0.2);

      .form-item {
        margin-bottom: 20px;

        .form-label {
          display: block;
          color: rgba(255, 255, 255, 0.9);
          font-weight: 500;
          margin-bottom: 8px;
          font-size: 14px;
        }

        .code-input-wrapper {
          display: flex;
          align-items: center;
          gap: 12px;

          .code-button-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
          }
        }
      }

      .login-button-wrapper {
        margin-top: 30px;
        margin-bottom: 20px;
      }

      .alternative-section {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 30px;

        .password-login {
          font-size: 14px;
          color: #fff;
          text-decoration: underline;
        }
      }

      .third-party-section {
        .divider-wrapper {
          display: flex;
          align-items: center;
          margin-bottom: 20px;

          .divider-line {
            flex: 1;
            height: 1px;
            background: rgba(255, 255, 255, 0.2);
          }

          .divider-text {
            margin: 0 15px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
          }
        }

        .social-buttons {
          display: flex;
          justify-content: center;
          gap: 40px;
          margin-bottom: 20px;

          .social-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.9);
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;

            &:active {
              transform: scale(0.95);
            }

            .social-text {
              font-size: 12px;
              color: #333;
            }
          }
        }
      }

      .agreement-section {
        text-align: center;
        line-height: 1.6;

        .agreement-text {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.7);
        }

        .agreement-link {
          font-size: 12px;
          color: #fff;
          text-decoration: underline;
        }
      }
    }
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes twinkle {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes glow {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.1);
  }
}
</style>
